<template>
  <div>
    <el-form
      ref="addQuestion"
      :inline="true"
      label-position="right"
      label-width="80px"
      size="small"
      :model="query"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="试卷名称" required>
            <el-input
              v-model="query.paper_name"
              placeholder="请输入试卷名称"
              style="width: 700px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试卷题型">
            <el-checkbox-group v-model="query.quest_type" @change="changeBtn">
              <el-checkbox :label="1">单选题</el-checkbox>
              <el-checkbox :label="2">多选题</el-checkbox>
              <el-checkbox :label="3">判断题</el-checkbox>
              <el-checkbox :label="4">简答题</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="归属学科" required>
            <el-select
              v-model="query.subject_id"
              placeholder="请选择学科"
              clearable
            >
              <el-option
                style.native="z-index:99999999;"
                v-for="item in treeList.data"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="归属目录" required>
            <el-select
              v-model="query.directory_id"
              placeholder="请选择目录"
              clearable
            >
              <el-option
                v-for="item in muluList? directoryList:muluList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试卷状态" required>
            <el-radio-group v-model="query.show_state">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试卷类型" required>
            <el-radio-group v-model="query.paper_type">
              <el-radio :label="1">模拟卷</el-radio>
              <el-radio :label="2">考试卷</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="试卷总分">
            <el-input
              v-model="query.total_score"
              placeholder="100"
              style="width: 115px"
            >
              <template slot="append" style="width: 55px">分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="及格分数">
            <el-input
              v-model="query.pass_score"
              placeholder="60"
              style="width: 105px"
            >
              <template slot="append" style="width: 55px">分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试卷难度">
            <el-select
              v-model="query.difficulty"
              placeholder="请选择难度"
              clearable
            >
              <el-option label="简单" :value="1" />
              <el-option label="中等" :value="2" />
              <el-option label="较难" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row>
        <el-col>
          <el-form-item label="选题信息">
            <el-table
              border=""
              :data="query.check_question_list"
              empty-text="请勾选试卷包含题型，从而生成选题模板"
            >
              <el-table-column label="题型" width="140" prop="name" />
              <el-table-column label="选题信息" width="1370">
                <template slot-scope="scope">
                  <span
                    >共
                    <el-input
                      v-model="scope.row.num"
                      style="width: 60px"
                    />，每题
                    <el-input
                      v-model.number="scope.row.score"
                      style="width: 60px"
                    />分，已选题数：<span style="color: #40b8ff">{{
                      scope.row.type==query.paper_type? scope.row.num:0
                    }}</span>
                    题
                  </span>
                  <el-button type="success" @click="showLook=true">看题</el-button>
                  <el-button type="primary" @click="openTest(scope.row.type)"
                    >选题</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-left: 80px">
      <el-button type="primary" @click="formSubmit">{{
        query.id ? "立即修改" : "立即创建"
      }}</el-button>
      <el-button type="primary" @click="formCancel">取消</el-button>
    </div>
    <el-dialog
      :visible="isShowOpen"
      title="选择试题"
      width="70%"
      @close="btnCancel"
      v-if="isShowOpen"
    >
      <QuestionList :checkQuestionMode="isShowOpen" ref="shujuGet" :qaType='neddType'/>
      <el-row type="flex" justify="end">
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" @click="btnOk">确定</el-button>
      </el-row>
    </el-dialog>
      <LookTest :value='showLook' :question='query.question_data' />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { postPaper, editPaper, realEditPaper } from "@/api/paper";

const defaultForm = {
  check_question_list: [],
  difficulty: "",
  directory_id: "",
  paper_name: "",
  paper_type: 2,
  pass_score: 60,
  quest_type: [],
  question_list: [],
  show_state: 1,
  subject_id: "",
  total_score: 100,
};
export default {
  name: "paperAdd",
  data() {
    return {
      query: {
        // 查询信息
        ...defaultForm,
      },
      content: "",
      editorData: "",
      answerData: "",
      input: "",
      isLoading: false,
      AddisShow: false,
      isShowOpen: false,
      questionType: [
        { name: "单选题", num: 0, score: 0, type: 1 },
        { name: "多选题", num: 0, score: 0, type: 2 },
        { name: "判断题", num: 0, score: 0, type: 3 },
        { name: "简答题", num: 0, score: 0, type: 4 },
      ],
      neddType: null,
      muluList: [],
      showLook:false
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      treeList: "subject/treeList",
    }),

    directoryList() {
      if (!this.query.subject_id) {
        return [];
      } else {
        this.query.directory_id = "";
        const result = this.treeList.data.find(
          (val) => val.id == this.query.subject_id
        );
        return result.children;
      }
    },
    tagList() {
      // 标签信息
      if (this.query.subject_id && this.query.directory_id) {
        // 取出一级
        const top = this.treeList.data.find(
          (val) => val.id == this.query.subject_id
        );
        // 取出二级
        const child = top.children.find(
          (val) => val.id == this.query.directory_id
        );
        return child.children;
      } else {
        return [];
      }
    },
  },
  mounted() {},
  watch: {
    "query.subject_id": {
      deep: true,
      immediate: true,
      handler(newval, oldval) {
        if (!newval) return false;
        // this.loadClassList();
      },
    },
  },
  created() {
  },
  methods: {
btnCancel(){
this.isShowOpen=false
},
    async editPaper(id) {
      const { data } = await editPaper(id);
      let numbers = data.question_list.split(",");
      data.check_question_list = JSON.parse(data.check_question_list);
      data.quest_type = JSON.parse(data.quest_type);
      data.question_list = numbers.map(Number);
      this.query = data;
      if (this.query.subject_id) {
          const result = this.treeList.data.find(
            (val) => val.id == this.query.subject_id
          );
          this.muluList = result.children;
        }
    },
    btnCancel() {
      this.isShowOpen = false;
    },
    openTest(type) {
      this.isShowOpen = true;
      this.neddType = type;
    },
    btnOk() {
      this.isShowOpen = false;
      console.log(this.$refs.shujuGet.multipleSelection);
      this.query.question_list = [];
      this.$refs.shujuGet.multipleSelection.forEach((item) => {
        this.query.question_list.push(item.id);
      });
      const a = this.query.check_question_list.filter((item) => {
        if (item.type === this.neddType) {
          return (item.num = this.$refs.shujuGet.multipleSelection.length);
        }
      });
      console.log(a);
    },
    changeBtn() {
      // console.log(this.query.quest_type);
      this.query.check_question_list = this.questionType.filter((item) => {
        return this.query.quest_type.find((items) => items === item.type);
      });
      // console.log(this.query.check_question_list);
    },
    ...mapActions({
      loadTreeList: "subject/loadTreeList",
    }),
    getEditorContent(data) {
      this.editorData = data;
    },
    async formSubmit() {
      try {
        await this.$refs.addQuestion.validate();
        if (this.query.id) {
          await realEditPaper(this.query);
        } else {
          await postPaper(this.query);
        }
        this.$message.success(this.query.id ? "修改成功" : "成功创建");
        this.formCancel();
      } catch (error) {
        console.log(error);
      }
    },
    formCancel() {
      this.$emit("CloseAdd", this.AddisShow);
    },
  },
};
</script>

<style lang="scss" scoped></style>
